<template>
  <div class="articleList"  ref="artList">
    <van-pull-refresh v-model="pullLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          v-for="item in list"
          :key="item.art_id"
          :title="item.title"
          @click="
            $router.push({ path: '/article', query: { id: item.art_id } })
          "
        >
          <template #label>
            <van-grid :border="false" :column-num="item.cover.type">
              <van-grid-item
                v-for="(value, index) in item.cover.images"
                :key="index"
              >
                <van-image :src="value" />
              </van-grid-item>
            </van-grid>
            <div class="info">
              <span>{{ item.aut_name }}</span>
              <span style="margin: 0 10px">评论 {{ item.comm_count }}</span>
              <span>{{ item.pubdate | relvTime }}</span>
              <van-icon
                name="cross"
                style="float: right; font-size: 12px"
                @click="reportShow = true"
              />
            </div>
          </template>
        </van-cell>
      </van-list>
      <!-- 弹出框设置 -->
      <van-popup v-model="reportShow" style="width: 60%">
        <van-cell-group>
          <van-cell title="不感兴趣" />
          <van-cell title="反馈垃圾内容" is-link @click="detail" />
          <van-cell title="拉黑作者" />
        </van-cell-group>
      </van-popup>

      <van-popup v-model="fullShow" style="width: 60%">
        <van-cell-group>
          <!-- <van-icon name="arrow-left" /> -->
          <van-cell
            title="返回"
            @click="fullShow = !fullShow"
            icon="arrow-left"
          />
          <van-cell title="其他问题" />
          <van-cell title="标题夸张" />
          <van-cell title="低俗色情" />
          <van-cell title="错别字多" />
          <van-cell title="旧闻重复" />
          <van-cell title="广告软件" />
          <van-cell title="内容不实" />
          <van-cell title="涉嫌违法犯罪" />
          <van-cell title="侵权" />
        </van-cell-group>
      </van-popup>
    </van-pull-refresh>
  </div>
</template>

<script>
import { articleAPI } from "@/api";
export default {
  props: ["channel_id"],
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      timestamp: new Date(),
      pullLoading: true,

      reportShow: false,
      fullShow: false,
         scrollTop: 0,
    };
  },
   mounted(){
    this.$refs.artList.onscroll=()=>{
      this.scrollTop=this.$refs.artList.scrollTop
    }
  },
   activated() {
    // 激活时再把之前的滚动条的高度赋值给滚动条，让它滚到对应的位置
    this.$refs.artList.scrollTop = this.scrollTop;
  },
  //   async created() {
  //     console.log(this.channel_id);
  //     let res = await articleAPI({
  //
  //         channel_id: this.channel_id,
  //         timestamp: new Date(),
  //
  //     });
  //     console.log(res);
  //   },
  methods: {
    async onLoad() {
      //   console.log("onload被调用", this.loading);
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      //   setTimeout(() => {
      //     for (let i = 0; i < 10; i++) {
      //       this.list.push(this.list.length + 1);
      //     }

      //     // 加载状态结束
      //     this.loading = false;

      //     // 数据全部加载完成
      //     if (this.list.length >= 40) {
      //       this.finished = true;
      //     }
      //   }, 1000);
      let res = await articleAPI({
        channel_id: this.channel_id,
        timestamp: this.timestamp,
      });
      //   console.log(res);
      // this.list = res.data.data.results;
      this.list.push(...res.data.data.results);
      this.timestamp = res.data.data.pre_timestamp;
      // console.log(this.list);
      this.loading = false;
      if (this.timestamp == null) {
        this.finished = true;
      }
    },
    async onRefresh() {
      let res = await articleAPI({
        channel_id: this.channel_id,
        timestamp: Date.now(),
      });
      this.list = res.data.data.results;
      this.timestamp = res.data.data.pre_timestamp;
      this.reportShow = false;
    },

    // 设置弹出层
    detail() {
      console.log("触发了");
      // this.reportShow = false;
      this.fullShow = true;
    },
  },
};
</script>

<style lang="less" scoped>
.articleList {
  position: fixed;
  width: 100%;
  left: 0;
  top: 90px;
  bottom: 50px;
  overflow: scroll;
}
</style>